import "/@/style/tailwind.css";
import "/@/style/common.less";

//访问用户媒体设备的兼容方法
function getUserMedia(constraints, success, error) {
  if (navigator.mediaDevices.getUserMedia) {
    //最新的标准API
    navigator.mediaDevices.getUserMedia(constraints).then(success).catch(error);
  } else if (navigator.webkitGetUserMedia) {
    //webkit核心浏览器
    navigator.webkitGetUserMedia(constraints, success, error);
  } else if (navigator.mozGetUserMedia) {
    //firfox浏览器
    navigator.mozGetUserMedia(constraints, success, error);
  } else if (navigator.getUserMedia) {
    //旧版API
    navigator.getUserMedia(constraints, success, error);
  }
}

let video = document.getElementById("video") as HTMLVideoElement;
let canvas = document.getElementById("canvas") as HTMLCanvasElement;
let context = canvas.getContext("2d");

function success(stream) {
  //兼容webkit核心浏览器
  // let CompatibleURL = window.URL || window.webkitURL;
  //将视频流设置为video元素的源
  // console.log(stream);

  //video.src = CompatibleURL.createObjectURL(stream);
  video.srcObject = stream;
  video.play();
}

function error(error) {
  console.log(`访问用户媒体设备失败${error.name}, ${error.message}`);
}

if (
  navigator.mediaDevices.getUserMedia ||
  navigator.getUserMedia ||
  navigator.webkitGetUserMedia ||
  navigator.mozGetUserMedia
) {
  //调用用户媒体设备, 访问摄像头
  getUserMedia({ video: { width: 480, height: 320 } }, success, error);
} else {
  alert("不支持访问用户媒体");
}

setInterval(() => {
  if (context) {
    context.drawImage(video, 0, 0, 480, 320);
  }
}, 2000);
